<template>
    <div :class="[listType == 'text' ? 'upload-file-text' : 'upload-file']">
        <div>
            <el-upload
                :list-type="listType"
                :action="uploadFileUrl"
                :before-upload="handleBeforeUpload"
                :file-list="fileList"
                :limit="limit"
                :on-error="handleUploadError"
                :on-exceed="handleExceed"
                :on-success="handleUploadSuccess"
                :on-remove="handleDelete"
                :on-change="handleChange"
                :headers="headers"
                class="upload-file-uploader"
                :disabled="disabled"
                :show-file-list="listType === 'picture-card'"
                ref="fileUpload"
                :accept="accept"
            >
                <i
                    class="el-icon-plus"
                    v-if="listType === 'picture-card' && disabled == false"
                ></i>
                <div
                    v-if="listType === 'text' && disabled == false"
                    class="singleFile"
                >
                    <el-button
                        size="mini"
                        type="primary"
                        icon="el-icon-upload2"
                    >
                        <!-- {{ fileList.length == 0 ? "上传" : "重新上传" }} -->
                        上传
                    </el-button>
                </div>

                <div slot="file" slot-scope="{ file }" class="fileLists">
                    <el-tooltip
                        class="item"
                        effect="dark"
                        :content="file.name"
                        placement="top"
                    >
                        <div v-if="imageSuffix.includes(getSuffix(file.name))">
                            <el-image :src="file.url" lazy>
                                <div slot="error" class="image-slot">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                            </el-image>
                            <span class="el-upload-list__item-actions">
                                <span
                                    v-if="
                                        imageSuffix.includes(
                                            getSuffix(file.name)
                                        )
                                    "
                                    class="el-upload-list__item-preview"
                                    @click="preview(file)"
                                >
                                    <i class="el-icon-zoom-in"></i>
                                </span>

                                <span
                                    v-if="!disabled"
                                    class="el-upload-list__item-delete"
                                    @click="handleDelete(file)"
                                >
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                        <div v-else class="filesList">
                            <!-- <i class="el-icon-document"></i> -->
                            <img src="../../assets/images/file.png" alt="" />
                            <span class="el-upload-list__item-actions">
                                <span
                                    v-if="
                                        imageSuffix.includes(
                                            getSuffix(file.name)
                                        )
                                    "
                                    class="el-upload-list__item-preview"
                                    @click="preview(file)"
                                >
                                    <i class="el-icon-zoom-in"></i>
                                </span>

                                <span
                                    v-if="!disabled"
                                    class="el-upload-list__item-delete"
                                    @click="handleDelete(file)"
                                >
                                    <i class="el-icon-delete"></i>
                                </span>
                            </span>
                        </div>
                    </el-tooltip>
                </div>
                <!-- 上传提示 -->
                <div class="el-upload__tip" slot="tip" v-if="showTip">
                    请上传
                    <template v-if="fileSize">
                        大小不超过
                        <b style="color: #f56c6c">{{ fileSize }}MB</b>
                    </template>
                    <template v-if="fileType">
                        格式为
                        <b style="color: #f56c6c">{{ fileType.join("/") }}</b>
                    </template>
                    的文件
                </div>
            </el-upload>
        </div>
        <div v-if="listType === 'text'" class="fileList_text">
            <div v-for="item in fileList" class="fileListItem">
                <div class="label">
                    <!-- <el-tooltip -->
                    <!-- class="item" -->
                    <!-- effect="dark" -->
                    <!-- :content="item.name" -->
                    <!-- placement="top" -->
                    <!-- > -->
                    <!-- <div class="label"> -->
                    <!-- {{ item.name }} -->
                    <!-- </div> -->
                    <!-- </el-tooltip> -->
                    <TooltipDiv
                        :content="item.name"
                        @click="_previewImages([item.url])"
                    ></TooltipDiv>
                </div>
                <div>
                    <el-button @click="handleDelete(item)" type="text"
                        >删除</el-button
                    >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { listByIds, delOss } from "@/api/system/oss";
import TooltipDiv from "@/views/quota/forecast/chunk/tooltipDiv";
export default {
    name: "pictureCard",
    components: { TooltipDiv },
    props: {
        // 值
        value: [String, Object, Array],
        // 数量限制
        limit: {
            type: Number,
            default: 5,
        },
        // 大小限制(MB)
        fileSize: {
            type: Number,
            default: 5,
        },
        // 文件类型, 例如['png', 'jpg', 'jpeg']
        fileType: {
            type: Array,
            default: () => ["doc", "xls", "ppt", "txt", "pdf"],
        },
        // 是否显示提示
        isShowTip: {
            type: Boolean,
            default: true,
        },
        listType: {
            type: String,
            default: "picture-card",
        },
        disabled: {
            default: false,
        },
    },
    data() {
        return {
            number: 0,
            uploadList: [],
            baseUrl: process.env.VUE_APP_BASE_API,
            uploadFileUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传文件服务器地址
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            fileList: [],
            imageSuffix: ["jpg", "jpeg", "png"],
        };
    },
    watch: {
        value: {
            async handler(val) {
                if (val) {
                    let temp = 1;
                    // 首先将值转为数组
                    if (this.fileList.length == 0) {
                        let list;
                        if (Array.isArray(val)) {
                            list = val;
                        } else {
                            await listByIds(val).then((res) => {
                                list = res.data.map((oss) => {
                                    oss = {
                                        name: oss.originalName,
                                        url: oss.url,
                                        ossId: oss.ossId,
                                    };
                                    return oss;
                                });
                            });
                        }
                        // 然后将数组转为对象数组
                        this.fileList = list.map((item) => {
                            item = {
                                name: item.name,
                                url: item.url,
                                ossId: item.ossId,
                            };
                            item.uid =
                                item.uid || new Date().getTime() + temp++;
                            return item;
                        });
                    }
                } else {
                    this.fileList = [];
                    return [];
                }
            },
            deep: true,
            immediate: true,
        },
    },
    computed: {
        // 是否显示提示
        showTip() {
            return this.isShowTip && (this.fileType || this.fileSize);
        },
        accept() {
            let fileTypes = this.fileType?.map((item) => {
                return `.${item}`;
            });
            return fileTypes?.join(",");
        },
    },
    methods: {
        getSuffix(name) {
            let reg = /(?<=\.).*/g;
            let suffix = name.match(reg)?.[0];
            return suffix;
        },
        preview(file) {
            console.log(file);
            // let url = URL.createObjectURL(file);
            this._previewImages([file.url]);
        },
        handleChange(file, fileList) {
            // console.log(fileList);
            // const that = this;
            // if (this.limit == 1) {
            //     if (fileList.length > 0) {
            //         that.fileList = [fileList[fileList.length - 1]]; // 这一步，是 展示最后一次选择的文件
            //     }
            // }
        },
        handleRemove(file) {
            // console.log(file);
        },

        handleDownload(file) {
            // console.log(file);
        },
        // 上传前校检格式和大小
        handleBeforeUpload(file) {
            // 校检文件类型
            if (this.fileType) {
                const fileName = file.name.split(".");
                const fileExt = fileName[fileName.length - 1];
                const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
                if (!isTypeOk) {
                    this.$modal.msgError(
                        `文件格式不正确, 请上传${this.fileType.join(
                            "/"
                        )}格式文件!`
                    );
                    return false;
                }
            }
            // 校检文件大小
            if (this.fileSize) {
                const isLt = file.size / 1024 / 1024 < this.fileSize;
                if (!isLt) {
                    this.$modal.msgError(
                        `上传文件大小不能超过 ${this.fileSize} MB!`
                    );
                    return false;
                }
            }
            this.$modal.loading("正在上传文件，请稍候...");
            this.number++;
            return true;
        },
        // 文件个数超出
        handleExceed() {
            this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
        },
        // 上传失败
        handleUploadError(err) {
            this.$modal.msgError("上传文件失败，请重试");
            this.$modal.closeLoading();
            this.$emit("uploadEnd", "error");
        },
        // 上传成功回调
        handleUploadSuccess(res, file, fileList) {
            this.$modal.closeLoading();
            if (res.code === 200) {
                this.uploadList.push({
                    name: res.data.fileName,
                    url: res.data.url,
                    ossId: res.data.ossId,
                });
                this.uploadedSuccessfully();
            } else {
                this.number--;
                this.$modal.msgError(res.msg);
                this.$refs.fileUpload.handleRemove(file);
                this.uploadedSuccessfully();
            }
            this.$emit("uploadEnd", "success");
        },
        // 删除文件
        handleDelete(file, filelist) {
            let index = this.fileList.findIndex((item) => {
                return item.uid == file.uid;
            });
            let ossId = this.fileList[index].ossId;
            delOss(ossId);
            this.fileList.splice(index, 1);
            this.$emit("input", this.listToString(this.fileList));
        },
        // 上传结束处理
        uploadedSuccessfully() {
            if (this.number > 0 && this.uploadList.length === this.number) {
                // this.fileList = this.fileList.concat(this.uploadList);
                this.fileList.push(...this.uploadList);
                this.uploadList = [];
                this.number = 0;
                this.$emit("input", this.listToString(this.fileList));
                this.$modal.closeLoading();
            }
        },
        // 获取文件名称
        getFileName(name) {
            // 如果是url那么取最后的名字 如果不是直接返回
            if (name.lastIndexOf("/") > -1) {
                return name.slice(name.lastIndexOf("/") + 1);
            } else {
                return name;
            }
        },
        // 对象转成指定字符串分隔
        listToString(list, separator) {
            let strs = "";
            separator = separator || ",";
            for (let i in list) {
                strs += list[i].ossId + separator;
            }
            return strs != "" ? strs.substr(0, strs.length - 1) : "";
        },
    },
};
</script>

<style scoped lang="scss">
.upload-file-text {
    display: flex;
    flex-direction: column;
    width: calc(100% - 20px);
}
.upload-file {
    display: flex;
    align-items: center;
}
.upload-file-uploader {
    // margin-bottom: 5px;
}
.upload-file-list .el-upload-list__item {
    border: 1px solid #e4e7ed;
    line-height: 2;
    margin-bottom: 10px;
    position: relative;
}
.upload-file-list .ele-upload-list__item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: inherit;
}
.ele-upload-list__item-content-action .el-link {
    margin-right: 10px;
}

::v-deep .el-upload__tip {
    height: auto;
}
.singleFile {
    display: flex;
}
.fileListItem {
    width: 100%;
    display: flex;
    align-items: center;
    vertical-align: middle;
    gap: 15px;
    justify-content: space-between;
    // > div {
    //     width: calc(100% - 50px);
    // }
    .label {
        flex: 1;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
    }
}

::v-deep .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 100px;
}
::v-deep .el-upload-list__item {
    width: 100px;
    height: 100px;
}
.filesList {
    // height: 100%;
    height: 100px;
    width: 100px;
    // position: relative;
    // text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    // i {
    //     font-size: 80px;
    //     // line-height: 100px;
    // }
    img {
        width: 80%;
    }
}
.fileLists {
    height: 100%;
}
::v-deep .el-upload-list__item {
    border: none;
}
.fileList_text {
    display: flex;
    flex-direction: column;
    max-height: 100px;
    overflow-y: auto;
}
</style>
